<template>
  <el-collapse>
    <el-collapse-item title="变量设置">
      <el-form-item label="日志级别">
        <el-radio-group v-model="elementVariablePrintValue.logLevel">
          <el-radio-button label="Trace" value="Trace" />
          <el-radio-button label="Info" value="Info" />
          <el-radio-button label="Warning" value="Warning" />
          <el-radio-button label="Error" value="Error" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="变量类型">
        <el-radio-group v-model="elementVariablePrintValue.variableType" @change="handleTypeChange">
          <el-radio-button label="所有变量" value="all" />
          <el-radio-button label="流程变量" value="global" />
          <el-radio-button label="自定义变量" value="custom" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="流程变量" v-if="elementVariablePrintValue.variableType == 'global'">
        <el-checkbox-group v-model="elementVariablePrintValue.flowVariableList" @change="handleVariablesChange">
          <el-checkbox v-for="opt in globalVariables" :key="opt.id" :label="opt.name" :value="opt.id" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="自定义变量" v-if="elementVariablePrintValue.variableType == 'custom'">
        <el-input v-model="elementVariablePrintValue.flowVariables" placeholder="输入变量名，多个以逗号隔开" />
      </el-form-item>
    </el-collapse-item>
  </el-collapse>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { mapState } from 'pinia';
import modelerStore from '@wf/components/bpmnjs/store/modeler';
import { getGlobalVariablesValue } from '@wf/components/bpmnjs/bo-utils/globalVariablesUtil';
import { getVariablePrintTaskValue, setVariablePrintTaskValue } from '@wf/components/bpmnjs/bo-utils/serviceTaskUtil';

export default defineComponent({
  name: 'ElementVariablePrintTask',
  data() {
    return {
      elementVariablePrintValue: {},
      globalVariables: []
    };
  },
  computed: {
    ...mapState(modelerStore, ['getActive', 'getActiveId'])
  },
  watch: {
    elementVariablePrintValue: {
      handler(newVal) {
        setVariablePrintTaskValue(this.getActive, newVal);
      },
      deep: true
    }
  },
  mounted() {
    this.getGlobalVariables();
    this.getElementVariablePrintValue();
  },
  methods: {
    getElementVariablePrintValue() {
      this.elementVariablePrintValue = getVariablePrintTaskValue(this.getActive);
    },
    getGlobalVariables() {
      this.globalVariables = getGlobalVariablesValue(this.getActive.businessObject.$parent);
    },
    handleVariablesChange(v) {
      this.elementVariablePrintValue.flowVariables = v.join(',');
    },
    handleTypeChange(v) {
      if (v == 'all') {
        this.elementVariablePrintValue.isAllVariables = 'Y';
      } else {
        this.elementVariablePrintValue.isAllVariables = 'N';
      }
    }
  }
});
</script>
